<!doctype html>
<html>
  <head>
    <!-- http://konvajs-doc.bluehymn.com/docs/sandbox/Image_Resize.html -->
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Image Resize Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;
      let data = [10, 10, 10, 100, 100, 100, 100, 10];
      function update(activeAnchor) {
        var group = activeAnchor.getParent();
        var topLeft = group.get(".topLeft")[0];
        var topRight = group.get(".topRight")[0];
        var bottomRight = group.get(".bottomRight")[0];
        var bottomLeft = group.get(".bottomLeft")[0];
        var image = group.get("Image")[0];
        var line = group.get("Line")[0];

        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();
        console.log("topLeft", topLeft.attrs);
        console.log("anchorX", anchorX);
        console.log("anchorY", anchorY);
        // let data =[10,10, 10,100, 100,100 ,100,10]
        if (true) {
          switch (activeAnchor.getName()) {
            case "topLeft":
              topRight.y(anchorY);
              bottomLeft.x(anchorX);
              break;
            case "topRight":
              topLeft.y(anchorY);
              bottomRight.x(anchorX);
              break;
            case "bottomRight":
              bottomLeft.y(anchorY);
              topRight.x(anchorX);
              break;
            case "bottomLeft":
              bottomRight.y(anchorY);
              topLeft.x(anchorX);
              break;
          }
        }

        let data = [
          topLeft.attrs.x,
          topLeft.attrs.y,
          topRight.attrs.x,
          topRight.attrs.y,
          bottomRight.attrs.x,
          bottomRight.attrs.y,
          bottomLeft.attrs.x,
          bottomLeft.attrs.y,
        ];
        line.points(data);
      }
      function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Konva.Circle({
          x: x,
          y: y,
          stroke: "#666",
          fill: "#ddd",
          strokeWidth: 1,
          radius: 8,
          name: name,
          draggable: true,
          dragOnTop: false,
        });

        anchor.on("dragmove", function () {
          update(this);
          layer.draw();
        });
        anchor.on("mousedown touchstart", function () {
          group.draggable(false);
          this.moveToTop();
        });
        anchor.on("dragend", function () {
          group.draggable(true);
          layer.draw();
        });
        // add hover styling
        anchor.on("mouseover", function () {
          var layer = this.getLayer();
          document.body.style.cursor = "pointer";
          this.strokeWidth(4);
          layer.draw();
        });
        anchor.on("mouseout", function () {
          var layer = this.getLayer();
          document.body.style.cursor = "default";
          this.strokeWidth(2);
          layer.draw();
        });

        group.add(anchor);
      }

      var stage = new Konva.Stage({
        container: "container",
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var poly = new Konva.Line({
        points: [10, 10, 100, 10, 100, 100, 10, 100],
        stroke: "black",
        strokeWidth: 2,
        closed: true,
      });
      var darthVaderGroup = new Konva.Group({
        x: 180,
        y: 50,
        draggable: true,
      });
      const textNode = new Konva.Text({
        x: 10,
        y: 10,
        width: 200,
        text: 100,
        fontSize: 20,
        draggable: true,
        name: "Text",
        fill: "red",
      });
      layer.add(darthVaderGroup);
      darthVaderGroup.add(poly);
      darthVaderGroup.add(textNode);
      addAnchor(darthVaderGroup, 10, 10, "topLeft");
      addAnchor(darthVaderGroup, 100, 10, "topRight");
      addAnchor(darthVaderGroup, 100, 100, "bottomRight");
      addAnchor(darthVaderGroup, 10, 100, "bottomLeft");
      //标签
      layer.draw();
    </script>
  </body>
</html>
